<template>
  <view class="container">
    <!-- Header -->
    <view class="header">
      <text class="title">Theme Settings</text>
    </view>

    <scroll-view scroll-y class="content">
      <!-- Color Theme Section -->
      <view class="section">
        <view class="section-header">
          <text class="section-title">Color Theme</text>
        </view>
        <view class="theme-grid">
          <view 
            v-for="theme in colorThemes" 
            :key="theme.id"
            class="theme-card"
            :class="{ 'active': currentTheme === theme.id }"
            @click="selectTheme(theme.id)"
          >
            <view 
              class="theme-preview"
              :style="{ backgroundColor: theme.primary }"
            >
              <view class="theme-colors">
                <view 
                  v-for="(color, index) in [theme.primary, theme.secondary, theme.accent]"
                  :key="index"
                  class="color-dot"
                  :style="{ backgroundColor: color }"
                ></view>
              </view>
            </view>
            <text class="theme-name">{{ theme.name }}</text>
          </view>
        </view>
      </view>

      <!-- Display Settings -->
      <view class="section">
        <view class="section-header">
          <text class="section-title">Display Settings</text>
        </view>
        <view class="settings-list">
          <view class="setting-item">
            <text>Dark Mode</text>
            <u-switch v-model="darkMode" @change="toggleDarkMode"></u-switch>
          </view>
          <view class="setting-item">
            <text>Font Size</text>
            <u-slider
              v-model="fontSize"
              :min="12"
              :max="24"
              :step="1"
              @change="updateFontSize"
            ></u-slider>
          </view>
          <view class="setting-item">
            <text>Reduce Motion</text>
            <u-switch v-model="reduceMotion" @change="toggleReduceMotion"></u-switch>
          </view>
        </view>
      </view>

      <!-- Custom Theme -->
      <view class="section">
        <view class="section-header">
          <text class="section-title">Custom Theme</text>
        </view>
        <view class="custom-theme">
          <view class="color-picker">
            <text>Primary Color</text>
            <view class="color-input">
              <view 
                class="color-preview"
                :style="{ backgroundColor: customTheme.primary }"
              ></view>
              <u-input
                v-model="customTheme.primary"
                placeholder="#000000"
              ></u-input>
            </view>
          </view>
          <view class="color-picker">
            <text>Secondary Color</text>
            <view class="color-input">
              <view 
                class="color-preview"
                :style="{ backgroundColor: customTheme.secondary }"
              ></view>
              <u-input
                v-model="customTheme.secondary"
                placeholder="#000000"
              ></u-input>
            </view>
          </view>
          <view class="color-picker">
            <text>Accent Color</text>
            <view class="color-input">
              <view 
                class="color-preview"
                :style="{ backgroundColor: customTheme.accent }"
              ></view>
              <u-input
                v-model="customTheme.accent"
                placeholder="#000000"
              ></u-input>
            </view>
          </view>
          <u-button 
            type="primary"
            @click="applyCustomTheme"
          >Apply Custom Theme</u-button>
        </view>
      </view>

      <!-- Preview Section -->
      <view class="section">
        <view class="section-header">
          <text class="section-title">Preview</text>
        </view>
        <view class="preview-container">
          <view class="preview-card">
            <view class="preview-header">
              <text class="preview-title">Sample Card</text>
              <u-button type="primary" size="mini">Action</u-button>
            </view>
            <text class="preview-text">This is how your content will look with the selected theme.</text>
            <view class="preview-actions">
              <u-button type="info" size="mini">Button 1</u-button>
              <u-button type="error" size="mini">Button 2</u-button>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTheme: 'default',
      darkMode: false,
      fontSize: 16,
      reduceMotion: false,
      colorThemes: [
        {
          id: 'default',
          name: 'Default',
          primary: '#4b7bec',
          secondary: '#a5b1c2',
          accent: '#45aaf2'
        },
        {
          id: 'dark',
          name: 'Dark',
          primary: '#2d3436',
          secondary: '#636e72',
          accent: '#00b894'
        },
        {
          id: 'light',
          name: 'Light',
          primary: '#ffffff',
          secondary: '#dfe6e9',
          accent: '#0984e3'
        },
        {
          id: 'nature',
          name: 'Nature',
          primary: '#20bf6b',
          secondary: '#78e08f',
          accent: '#0fb9b1'
        }
      ],
      customTheme: {
        primary: '#4b7bec',
        secondary: '#a5b1c2',
        accent: '#45aaf2'
      }
    }
  },
  methods: {
    selectTheme(themeId) {
      this.currentTheme = themeId
      const theme = this.colorThemes.find(t => t.id === themeId)
      if (theme) {
        this.applyTheme(theme)
      }
    },
    applyTheme(theme) {
      // Implement theme application logic
      uni.showToast({
        title: `${theme.name} theme applied`,
        icon: 'success'
      })
    },
    toggleDarkMode(value) {
      // Implement dark mode toggle logic
      uni.showToast({
        title: `Dark mode ${value ? 'enabled' : 'disabled'}`,
        icon: 'none'
      })
    },
    updateFontSize(value) {
      this.fontSize = value
      // Implement font size update logic
    },
    toggleReduceMotion(value) {
      this.reduceMotion = value
      // Implement reduce motion toggle logic
      uni.showToast({
        title: `Reduced motion ${value ? 'enabled' : 'disabled'}`,
        icon: 'none'
      })
    },
    applyCustomTheme() {
      // Validate color codes
      const isValidColor = (color) => /^#[0-9A-F]{6}$/i.test(color)
      
      if (!isValidColor(this.customTheme.primary) ||
          !isValidColor(this.customTheme.secondary) ||
          !isValidColor(this.customTheme.accent)) {
        uni.showToast({
          title: 'Invalid color code',
          icon: 'error'
        })
        return
      }
      
      // Implement custom theme application logic
      uni.showToast({
        title: 'Custom theme applied',
        icon: 'success'
      })
    }
  }
}
</script>

<style scoped>
.container {
  flex: 1;
  background-color: #f8f9fa;
}

.header {
  padding: 20rpx;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
}

.content {
  flex: 1;
  padding: 20rpx;
}

.section {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 6rpx rgba(0,0,0,0.1);
}

.section-header {
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
}

.theme-card {
  border: 2rpx solid #eee;
  border-radius: 8rpx;
  overflow: hidden;
  cursor: pointer;
}

.theme-card.active {
  border-color: #4b7bec;
}

.theme-preview {
  height: 120rpx;
  padding: 20rpx;
  display: flex;
  align-items: flex-end;
}

.theme-colors {
  display: flex;
  gap: 10rpx;
}

.color-dot {
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  border: 2rpx solid rgba(255,255,255,0.5);
}

.theme-name {
  padding: 10rpx;
  text-align: center;
  font-size: 26rpx;
  color: #666;
  background-color: #fff;
}

.settings-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10rpx 0;
}

.custom-theme {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.color-picker {
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.color-input {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.color-preview {
  width: 40rpx;
  height: 40rpx;
  border-radius: 6rpx;
  border: 2rpx solid #eee;
}

.preview-container {
  padding: 20rpx;
  background-color: var(--bg-color, #fff);
}

.preview-card {
  background-color: #fff;
  border-radius: 8rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 6rpx rgba(0,0,0,0.1);
}

.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15rpx;
}

.preview-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}

.preview-text {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 15rpx;
  line-height: 1.4;
}

.preview-actions {
  display: flex;
  gap: 15rpx;
}
</style> 